<template>
  <view v-if="UserForm">
    <view class="item">
      <uni-list-item title="头像"></uni-list-item>
      <view class="UserImg">
        <image src="@/static/img/9.png" alt="" />
        <i class="iconfont icon-xiangyoujiantou" style="font-size: 40rpx;"></i>
      </view>
    </view>
    <view class="item">
      <uni-list-item title="姓名"></uni-list-item>
      <uv-input 
        placeholder="未填写" 
        inputAlign="right" 
        border="none" 
        v-model="UserForm.username" 
      />
    </view>
    <view class="item">
      <uni-list-item title="性别"></uni-list-item>
      <uv-input 
        placeholder="未选择" 
        inputAlign="right" 
        border="none" 
        v-model="UserForm.gender" 
      />
    </view>
    <view class="item">
      <uni-list-item title="邮箱"></uni-list-item>
      <uv-input 
        placeholder="未填写" 
        inputAlign="right" 
        border="none" 
        v-model="UserForm.email" 
      />
    </view>
    <view class="item">
      <uni-list-item title="电话"></uni-list-item>
      <uv-input 
        placeholder="未填写" 
        inputAlign="right" 
        border="none" 
        v-model="UserForm.phone" 
      />
    </view>
    <view class="btn" @click="logout">
		提交修改
    </view>
  </view>
  <view v-else class="loading">
    <text>加载中...</text>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { userinfo,updateInfo } from '@/utils/api/Management.js'

// 初始化为空对象，避免null引用错误
const UserForm = ref({})
const userId = ref(null)
const loading = ref(true)

onMounted(async () => {
  try {
    // 1. 获取UserId（使用Promise封装，确保顺序执行）
    const storageResult = await new Promise((resolve, reject) => {
      uni.getStorage({
        key: 'UserId',
        success: (res) => resolve(res),
        fail: (err) => {
          console.error('获取UserId失败:', err)
          reject(err)
        }
      })
    })
    
    userId.value = storageResult.data
    console.log('获取UserId:', userId.value)
    
    // 2. 获取用户信息
    const res = await userinfo({ id: userId.value })
    if (res.code === 200) {
      UserForm.value = res.data
      console.log('用户信息:', UserForm.value)
    } else {
      throw new Error('获取用户信息失败: ' + res.message)
    }
  } catch (error) {
    console.error('初始化用户信息出错:', error)
  } finally {
    loading.value = false
  }
})

	const logout =async ()=>{
		console.log(UserForm.value);
		// let res = await updateInfo(UserForm.value)
		// console.log(res);
	}

</script>

<style scoped>
@import '@/static/iconfont/iconfont.css';

.item {
  display: flex;
  border: 2rpx solid #eee;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
}

.UserImg {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 200rpx;
}

.UserImg image {
  height: 80rpx;
  width: 80rpx;
  border-radius: 50%;
  object-fit: cover;
}

.btn {
  margin: 60rpx 30rpx;
  font-size: 32rpx;
  color: #fff;
  background-color: #ff4500;
  text-align: center;
  padding: 20rpx 0;
  border-radius: 10rpx;
}

.loading {
  text-align: center;
  padding: 100rpx 0;
  font-size: 32rpx;
  color: #999;
}
</style>